<script setup lang="ts">
import { ref, type Ref,onMounted } from 'vue'
import { useRouter } from 'vue-router'
import{ getDataFn } from '@/api/getPro'
// import{ addUserFn } from '@/api/addUser'
import axios from 'axios'
import { showDialog } from 'vant';  //局部导入

onMounted(()=>{
    getDataFn().then(res => {
        console.log(res);
        
    })
})

const value: Ref<string> = ref('')
const checked: Ref<boolean> = ref(false)
const code: Ref<string> = ref('')
const router = useRouter()

function goback(){
    router.push('/');
}

function getUserClick(){  //响应式数据加。value
    //验证手机号是否合法
    if(!(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value.value))){
     showDialog({ message: '手机号不符合要求，请重新输入' });
     console.log(1111);
     
    } else {
        //存到本地
        localStorage.setItem('username',value.value)
        //下一步
        router.push('/step1');
    }
    //验证手机号是否已注册 如果已注册则直接跳转到登录页面  没注册过则发送短信验证码
    //这样ok方法1：
    // addUserFn({username:value.value,password:code.value}).then(res=>{
    //     console.log(res);  
    // })
    //方法2：
    // axios.post('http://127.0.0.1:3000/api/users',{username:value.value,
    //     password:code.value}).then(res => {
    //     console.log(res);
        
    // })
   
}


</script>
<template>
    <main>
        <div class="logintitle">
            <span @click="goback">X</span>
            <h1 class="title">验证码登陆</h1>
            <span class="desc">未注册的手机号验证通过后将自动注册~</span>
        </div>
        <van-field v-model="value" label="+86" placeholder="请输入手机号" />

        <van-field v-model="code" label="请输入校验码" placeholder="请输入验证码" maxlength="4" type="text" extra="K4P8" />
        <!-- 验证码可以通过其他方式生成并显示 -->

        
        <van-checkbox  v-model="checked">我已阅读并同意签署
            <a href="#" target="_blank">用户协议</a>和
            <a href="#" target="_blank">隐私政策</a>
        </van-checkbox>
      <!-- $router.push('/step1') -->
        <van-button class="getcode" block round @click="getUserClick">获取短信验证码</van-button>
        <br>
        <a href="#" target="_blank">密码登陆</a>
    


    </main>

</template>

<style lang="scss" scoped>
// main {
//     font-size: 0.14px;  这里设置后会出问题 导致样式失效
// }
*{
    margin-top: 20px;
    box-sizing: border-box;
}

main {
    padding: 0 40px;
}

.logintitle {
    display: flex;
    flex-direction: column;
}

span {
    font-size: 12px;
    // color: #ccc;
}

// .title {
//     font-size: 25px;
// }
a {
    text-decoration: none;
    color: #ed775d;
}

.getcode{
    background: linear-gradient(to right, #f09736, #eb642b);
    color: white;
}

</style>